<template>
	<div class="view">
		<div>
			<img :src="formatPoster(data.poster)" class="poster" />
		</div>
		<p class="w-p-item">
			<span 
				class="w-attr"
				v-text="data.attribute.name" 
				v-bind:style="{'border': '1px solid ' + data.attribute.strokeColor, 
				'color': data.attribute.textColor, 
				'background-color': data.attribute.bgColor}"></span>
			<span 
				class="w-name"
				v-text="data.name"></span>
		</p>
		<p class="w-p-item">
			<span class="key">上映地区</span>
			<span v-text="data.areaName"></span>
		</p>
		<p class="w-p-item">
			<span class="key">上映日期</span>
			<span v-text="data.releaseDate"></span>
		</p>
		<p class="w-p-item">
			<span class="key">类型</span>
			<span v-text="formatTypes(data.types)" class="value"></span>
		</p>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {}
		},
		methods: {
			formatPoster(data) {
				var posterJson = data;
				var poster;
				if(posterJson != null && posterJson != '') {
					var posterObj = eval('(' + posterJson + ')');
					poster = posterObj.url + "-works_poster";
				}
				return poster;
			},
			formatTypes(data) {
				return data.join(" ");
			}
		}
	}
</script>

<style scoped>
	.view {
		cursor: pointer;
		margin-right: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		padding: 10px;
		text-align: left;
	}

	.w-p-item {
		margin-top: 5px;
		font-size: 13px;
	}
	
	.w-p-item .key {
		font-weight: bold;
		color: #333333;
		font-size: 12px;
		margin-right: 5px;
	}
	.w-p-item .value {
		word-wrap: break-word; 
　　		word-break: normal; 
		font-size: 12px;
	}
	.w-attr {
		border-radius: 5px;
		font-size: 12px;
		padding: 1px 3px;
		margin-right: 5px;
	}
	
	.w-name {
		font-size: 15px;
		color: #000000;
		opacity: 0.87;
	}
	
	.poster {
		width: 150px;
		height: 210px;
		display: block;
		background: #999999;
		margin: 0 auto;
		margin-bottom: 10px;
	}

</style>